<template>
  <div>
    <div class="tab_box">
      <!-- <el-button
        round
        v-for="(item, index) in btnList"
        :key="index"
        :class="{ active: selectedIndex === index }"
        @click="handleClick(index)"
        >{{ item }}</el-button
      > -->
      <van-tabs v-model:active="active">
        <van-tab title="附近">
          <div class="content-box">
            <div
              class="content-item"
              v-for="(item, index) in dataList"
              :key="item._id"
            >
              <dl>
                <dt>
                  <img :src="item.img" alt="" />
                </dt>
                <dd>
                  <p>{{ item.title }}</p>
                  <div class="author">
                    <img :src="item.author?.img" alt="" />
                    <span class="name">{{ item.author?.name }}</span>
                    <div @click="dzShow = index">
                      <img
                        src="../../assets/dz-active.png"
                        alt=""
                        style="width: 24px; height: 24px"
                        v-if="dzShow === index"
                      />
                      <img
                        src="../../assets/dianzan.png"
                        style="width: 24px; height: 24px"
                        v-else
                      />
                    </div>
                  </div>
                </dd>
              </dl>
            </div>
          </div>
        </van-tab>
        <van-tab title="本地商家">
          <dl v-for="item in merchant" :key="item._id" class="m-dl">
            <dt>
              <img :src="item.img" alt="" />
            </dt>
            <dd>
              <p class="mname">{{ item.name }}</p>
              <div class="m-info">
                <div>
                  <img src="../../assets/star-or.png" alt="" />
                  <span class="sp1">5.0</span>
                </div>
                <div class="m-info2">
                  <span>月售{{ item.sell }}</span>
                  <span>人均{{ item.price }}</span>
                </div>
              </div>
              <p class="mp1">主营：汉服、COS服、古风首饰</p>
              <div class="tag">
                <span>国潮新古风</span>
                <span>COS专卖</span>
              </div>
              <div class="mbtn">
                <span>38减3</span>
                <span>68减10</span>
                <span>98减20</span>
              </div>
            </dd>
          </dl>
        </van-tab>
        <van-tab title="热门活动">内容 3</van-tab>
        <van-tab title="打卡推荐">
          <map-view/>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "../../utils/axios";
import MapView from './MapView.vue'
const dataList = ref([]);
const dzShow = ref(-1);
const merchant = ref([]);

const getList = async () => {
  let { data } = await axios.get("/ancientList");
  dataList.value = data.data;
  console.log(dataList.value);
};
const getMerchant = async () => {
  let { data } = await axios.get("/merchant");
  console.log(data.data);
  merchant.value = data.data;
};

onMounted(() => {
  getList();
  getMerchant();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
.tab_box {
  padding: 10px 0;
  box-sizing: border-box;
}
.content-box {
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}
.content-item {
  width: calc(48% - 10px); /* 调整宽度以适应三列布局，减去margin */
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 10px;
  float: left;
}
.content-item dl dt img {
  width: 100%;
  height: 230px;
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(255, 255, 255, 1);
}
.content-item dl dd p {
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 20px;
  color: rgb(16, 16, 16);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.author {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: space-between; /* 修改为space-between以正确对齐元素 */
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}

.author img {
  width: 30px;
  height: 30px;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 1);
}

.author .name {
  width: auto; /* 修改宽度为auto，以便文本自适应 */
  height: 18px;
  line-height: 18px;
  color: rgb(154, 154, 154);
  font-size: 13px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.van-tab {
  /* padding: 0 15px;
  box-sizing: border-box; */
}
.m-dl {
  margin-top: 10px;
  margin-left: 15px;
  width: 360px;
  height: 142px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);
  font-family: Roboto;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
}
.m-dl dt {
  width: 121px;
  height: 121px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid red;
}
.m-dl dt img {
  width: 100%;
  height: 100%;
}
.m-dl dd {
  margin-left: 10px;
}
.m-dl dd .mname {
  width: 211px;
  height: 23px;
  line-height: 22px;
  color: rgb(61, 66, 70);
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-medium;
  font-weight: bold;
}
.m-info {
  display: flex;
  margin-top: 5px;
}
.m-info img {
  width: 10px;
  height: 10px;
  /* background-color: rgba(255, 130, 51, 1); */
}
.m-info .sp1 {
  margin-left: 5px;
  line-height: 11px;
  color: rgba(255, 130, 51, 1);
  font-size: 8px;
  vertical-align: middle;
}
.m-info .m-info2 {
  margin-left: 10px;
  color: rgba(146, 146, 175, 1);
  font-size: 8px;
  vertical-align: middle;
}
.m-info2 span {
  color: rgba(146, 146, 175, 1);
  font-size: 8px;
  margin-left: 5px;
}
.mp1 {
  margin-left: 5px;
  width: 119px;
  height: 11px;
  line-height: 11px;
  color: rgb(146, 146, 175);
  font-size: 8px;
}
.tag {
  display: flex;
}
.tag span {
  margin-top: 10px;
  margin-right: 5px;
  width: 71px;
  height: 19px;
  line-height: 19px;
  border-radius: 2px;
  background-color: rgba(255, 191, 51, 0.53);
  color: rgba(255, 130, 51, 1);
  font-size: 10px;
  text-align: center;
  font-family: Roboto;
}
.mbtn {
  display: flex;
}
.mbtn span {
  margin-top: 10px;
  margin-right: 10px;
  width: 35px;
  height: 16px;
  line-height: 16px;
  border-radius: 2px;
  background-color: rgba(244, 246, 249, 1);
  color: rgba(244, 98, 127, 1);
  font-size: 8px;
  text-align: center;
  font-family: Roboto;
  border: 1px solid rgba(255, 155, 175, 1);
}
</style>
